import React, { Component } from 'react'
import { connect } from 'dva';

import { Button, Row, Col, Table, Icon, Checkbox } from 'antd';
import { TableTitle, TableDesc } from '../styled';
import ListItem from "@/components/ListCard";
import Imgviewer from '@/components/ImgViewer'

interface Props {
  dispatch?: Function,
  details: {
    id: number;
    floorPlan: string;
  };
  match: {
    params: {
      id: number;
    }
  };
  loading: boolean;
  list?: {
    dataCnt: number;
  };
  cond: {
    pageSize: number;
    pageNumber: number;
  }
}

function CustomExpandIcon(props) {
  const { record = {} } = props;
  return (
    <>
      {record.children ? <Icon style={{ color: props.expanded ? 'var(--primary-blue)' : '#777777' }}
        type={props.expanded ? "caret-down" : "caret-right"}
        onClick={e => props.onExpand(props.record, e)}
      /> : null}
    </>
  );
}


@connect(({ build_floor, analyse_maintenance }) => ({
  // details: build_floor.details
  // loading: 
  list: analyse_maintenance.list || {},
  cond: analyse_maintenance.cond || {},
}))
class Details extends Component<Props, any> {

  state = {
    data: [
      { name: '项目名称', value: 'xxxxxx' },
      { name: '项目地址', value: 'xxxxxxxxx' },
      { name: '维保单位', value: 'xxxxxxxxx' },
      { name: '维保单位联系人', value: 'xxxxxxxxx' },
      { name: '联系电话', value: 'xxxxxxxxx' },
      { name: '委托单位', value: 'xxxxxxxxx' },
      { name: '委托单位联系人', value: 'xxxxxxxxx' },
      { name: '联系电话', value: 'xxxxxxxxx' },
      { name: '维保人员', value: 'xxxxxxxxx' },
      { name: '维保日期', value: 'xxxxxxxxx' },
    ],
    current: 1,
  }

  queryData(params) {

  }

  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
  }


  onShowSizeChange = (current, pageSize) => {
    const { dispatch, cond } = this.props;
    cond.pageSize = pageSize;
    this.setState({ current: 1 }, () => {
      dispatch({
        type: '/updateCond',
        payload: cond
      })
    })
  }

  render() {
    const { list } = this.props;
    const { dataCnt } = list;
    const data = [{
      id: '1',
      type: 'xxxx',
      count: '100',
      niceCount: '100',
      poorCount: '0',
      rate: '100',
    }];
    const maintainData = [
      {
        key: 1,
        content: '消防泵房',
        children: [
          {
            key: 11,
            content: 'x区xxxxx位置',
            children: []
          },
          {
            key: 12,
            content: 'x区xxxxx位置',
            children: [
              {
                key: 121,
                content: '水泵运行是否正常',
                complete: '正常',
              },
            ],
          },
          {
            key: 13,
            content: 'x区xxxxx位置',
            children: [
              {
                key: 131,
                content: '水泵运行是否正常',
                complete: '异常',
                reason: '灭火器材缺失',
              },
            ],
          },
        ],
      },
      {
        key: 2,
        content: '防火卷帘',
        children: [],
      },
    ];
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: index,
      id: item.id,
      type: item.type,
      count: item.count,
      niceCount: item.niceCount,
      poorCount: item.poorCount,
      rate: item.rate,
    })) : [];
    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      current: this.state.current,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: this.onShowSizeChange,
      onChange: (current) => {
        this.setState({
          current,
          isChangePage: true
        }, () => this.queryData({
          pageNum: current
        }));
      },
    };
    const columns = [
      {
        title: '设备类型',
        dataIndex: 'type',
      }, {
        title: '总数',
        dataIndex: 'count',
      }, {
        title: '完好数量',
        dataIndex: 'niceCount',
      }, {
        title: '损坏数量',
        dataIndex: 'poorCount',
      }, {
        title: '完好率',
        dataIndex: 'rate',
        render: (text, record) => {
          return (
            <>{`${text}%`}</>
          )
        }
      }
    ];
    const maintainColumns = [
      {
        title: '维护保养内容',
        dataIndex: 'content',
      }, {
        title: '保养完成情况',
        dataIndex: 'complete',
        render: (text, record) => {
          return (
            <div style={{ marginTop: '5px' }}>
              {text && <Checkbox style={{ display: 'inline-block' }} defaultChecked disabled />}
              <p style={{ display: 'inline-block', marginLeft: '10px' }}>{text}</p>
              {record.reason && <>
                <p style={{ display: 'inline-block', marginLeft: '10px', marginRight: '10px' }}>{`故障描述: ${record.reason}`}</p>
                <Imgviewer url='' hasText="查看图片" missText="" />
              </>}
            </div>
          )
        }
      }
    ];
    const maintainAns = maintainData && Array.isArray(maintainData) ? maintainData.map((item, index) => ({
      key: index,
      ...item
    })) : [];

    return (
      <>
        <Row>
          <Col key={1} span={16} style={{ marginTop: '-5px' }}>
            <TableTitle>xxxxxxx月度维护保养及相关记录手册</TableTitle>
          </Col>
          <Col key={2} span={4}>
            <Row type="flex" justify="end">
              <TableDesc>记录编号：xxxxxxxxxxx</TableDesc>
            </Row>
          </Col>
          <Col key={3} span={4}>
            <Row type="flex" justify="end">
              <TableDesc>记录时间：2019年6月30日</TableDesc>
            </Row>
          </Col>
        </Row>
        <ListItem data={this.state.data} />
        <TableTitle>项目基本情况</TableTitle>
        <Table columns={columns}
          pagination={pagination}
          dataSource={ans}
          loading={this.props.loading}
          bordered
        />
        <TableTitle>维保明细</TableTitle>
        <Table columns={maintainColumns}
          pagination={false}
          dataSource={maintainData}
          expandIcon={CustomExpandIcon}
          indentSize={40}
          bordered
        />
        <Button style={{ marginTop: '5%' }} onClick={() => { window.history.back() }} >
          返回
        </Button>
      </>
    );
  }
}

export default Details;
